<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>预约页面</title>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/assets/aui/css/aui.css" />
    <!-- jQuery Include -->
    <script type="text/javascript" src="${ctxPath}/static/assets/scripts/jquery.min.js"></script>
    <!--layuicss-->
    <link rel="stylesheet" href="${ctxPath}/static/assets/layui/css/layui.css"  media="all">
    <!--auijs-->
    <script type="text/javascript" src="${ctxPath}/static/assets/aui/script/api.js"></script>
    <script type="text/javascript" src="${ctxPath}/static/assets/aui/script/aui-tab.js"></script>
    <script type="text/javascript" src="${ctxPath}/static/assets/aui/script/aui-collapse.js"></script>
    <style>
        .aui-list-item-right>label>input{
            top: 22px;
        }
        .aui-row>div{
            color: #00bcd4;
            font-size: 12px;
        }
        .aui-row>div>p{
            color: #00bcd4;
            font-size: 12px;
            line-height: 1.5;
        }
        .desInfo>aui-row>div>p{
            font-size: 12px;
            text-align: center;
        }
        .footerEl{
            width: 100%;
            height: 2.5rem;
            bottom: 0;
            background-color: white;
            text-align: center;
            position: fixed;
            background-color: #f2f2f2;
        }
        .content{
            width: 100%;
            height: 4rem;
            background-color: white;
            font-size: 12px;
            text-align: left;
            font-family: auto;
            letter-spacing: 0.1rem;
            overflow-y: auto;
            font-style: normal;
            border: 1px solid #f2f2f2;
            color: #757575;
            line-height: 1.3;
            padding: 6px;
        }
        #comment{
            right: 0px;
            padding-left: 10rem;
        }
        .leftFooter{
            width: 30%;
            height: 4rem;
            position: absolute;
            left: 0;
            line-height: 2.3rem;
        }
        #buyBtn{
            width: 70%;
            height: 4rem;
            position: absolute;
            right: 0;
            background-color: #03a9f4;
            line-height: 2.5rem;
            color: white;
        }
        #tab{
            background-color: #f2f2f2;
            height: 1.5rem;
        }
        .leftFooter>i{
            font-size: 16px;
            color: #ffc107;
        }
        .shoucang{
            color: #ffc107;
            font-size: 14px;
        }

        .box{
            flex-wrap: wrap;
            flex-direction: row ;
            display: flex;
            align-self: auto;
            justify-content: left;
            position: absolute;
            top: 0.9rem;
            line-height: 2;
            overflow-y: auto;
        }
        .desInfo{
            height: 4rem;
            overflow-y: auto;
        }
        .serviceArea{
            color: red;
        }
        .seeCount{
            color: #03a9f4;
        }
        .box>div{
            font-size: 12px;
            color: #03a9f4;
        }
    </style>
</head>
<body>
<ul class="aui-list aui-form-list">
    <li >
        <header class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn"  id="retn">
                <span class="aui-iconfont aui-icon-back"></span>返回
            </a>
            <div class="aui-title">下单页面</div>
        </header>
    </li>
    <li class="aui-list-item aui-list-item-middle" >
        <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media wechat-avatar">
                <img src="http://www.tyler.org.cn/${returnResult.data.imgUrl}" style="border-radius: 50%;height: 70px;width: 70px;border: 1px solid #c9c9c9;">
            </div>

            <section class="desInfo">
                <div class="box">
                    <div>
                        ${returnResult.data.name}
                        &nbsp;&nbsp;
                    </div>
                    <div>
                        ${returnResult.data.age}岁
                        &nbsp;&nbsp;
                    </div>
                    <div>
                        ${returnResult.data.sex==1?'<i class="layui-icon layui-icon-male" style="font-size: 12px;color: #9B59B6;"></i>':'<i class="layui-icon layui-icon-female" style="font-size: 12px;color: #9B59B6;"></i>'}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div>
                        <i class="aui-iconfont aui-icon-location" style="font-size: 12px;color: #e51c23"></i>
                        查看位置信息:&nbsp;${distincts}km
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                  <!--  <div>
                        ${returnResult.data.birthplace}
                    </div>-->
                    <div  class="serviceArea">
                        服务区域:&nbsp;${returnResult.data.serviceArea}
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="seeCount">
                        浏览量:&nbsp;${returnResult.data.viewNumber==null?0:returnResult.data.viewNumber}
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                    <div>
                        评分:&nbsp;${returnResult.data.evaluation==null?0:returnResult.data.evaluation}
                        &nbsp;&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
            </section>
          <!--  <section class="desInfo">
                <div class="aui-row" style="height: 3rem;">
                    <div class="aui-col-xs-2">
                        <p>${returnResult.data.name}</p>
                    </div>
                    <div class="aui-col-xs-2">
                        <p>${returnResult.data.age}岁</p>
                    </div>
                    <div class="aui-col-xs-1">
                        <p>
                            ${returnResult.data.sex==1?'<i class="layui-icon layui-icon-male" style="font-size: 12px;color: #9B59B6;"></i>':'<i class="layui-icon layui-icon-female" style="font-size: 12px;color: #9B59B6;"></i>'}
                        </p>
                    </div>
                    <div class="aui-col-xs-3">
                        <p>评分:${returnResult.data.evaluation==null?0:returnResult.data.evaluation}分</p>
                    </div>
                    <div class="aui-col-xs-4">
                        <i class="aui-iconfont aui-icon-location" style="font-size: 12px;color: #e51c23"></i>
                        <p>${returnResult.data.distincts}公里</p>
                    </div>
                    <div class="aui-col-xs-3">
                        <p>${returnResult.data.birthplace}</p>
                    </div>
                    <div class="aui-col-xs-5">
                        <p>服务区域:&nbsp;&nbsp;${returnResult.data.serviceArea}</p>
                    </div>
                    <div class="aui-col-xs-4">
                        <p>浏览量:&nbsp;&nbsp;${returnResult.data.viewNumber==null?0:returnResult.data.viewNumber}次</p>
                    </div>
                </div>
            </section>-->
        </div>
    </li>
</ul>
<div class="aui-tab" id="tab">
    <div class="aui-tab-item " tapmode="" data-item-order="0" style="top: -8px;">个人介绍</div>
</div>
<div class="content">
    ${returnResult.data.remark}
</div>
<div class="aui-content aui-margin-b-15" style="overflow-y: auto;">
    <ul class="aui-list aui-media-list" id="busssizInfo">
    </ul>
</div>
<div class="footerEl">
    <span class="leftFooter">
        <i class="layui-icon layui-icon-rate" data-status="0"><span class="shoucang">收藏</span></i>
         <i class="layui-icon layui-icon-rate-solid" style="display: none" data-status="1"><span class="shoucang">收藏</span></i>
    </span>
    <span  id="buyBtn">
        下一步
    </span>
</div>

</body>
<script>
    apiready = function () {
        api.parseTapmode();
    }
    var collapse = new auiCollapse({
        autoHide:false //是否自动隐藏已经展开的容器
    });

</script>
<script>
    // //判断是否登录
    // var user = localStorage.getItem("userInfo");//以“key”为名称存储一个值“value”
    // if (!user) {
    //     location.href = "${ctxPath}/wechat/public/toLoginPage";//未实现
    // }

    $("#retn").click(function(){
        location.href="${ctxPath}/wechat/public/toArtificerListPage";
    })

    function  chooseBusiness(ele){
        $(ele).find(".aui-radio").prop("checked",true);
    }
    // 跳转评论页面
    function  toCommentPage(){
        location.href="${ctxPath}/artificerMeans/toCommentPage/${returnResult.data.id}";
    }
    $(function () {
        var userInfo= localStorage.getItem("userInfo");
        userInfo = JSON.parse(userInfo);
        $.ajax({
            type: "POST",
            url: "${ctxPath}/consumerCollection/searchByConsumerIdArtificerId",
            dataType: 'json',
            data:{
                artificerId :"${returnResult.data.id}",
                consumerId :userInfo?userInfo.id:28
            },
            async: false,
            success:function(data){
                if(data.status=="0000"){
                    var result= data.data.length;
                    if(result>0){//已经收藏
                        $(".leftFooter>i").eq(0).hide();
                        $(".leftFooter>i").eq(1).show();
                    }else{
                        $(".leftFooter>i").eq(0).show();
                        $(".leftFooter>i").eq(1).hide();
                    }
                }else {
                    alert(data.msg);
                }
            }
        });

        //去收藏
        $(".leftFooter").click(function () {
           var status = $("i:hidden").attr("data-status");
            if((status==0?0:1)==0){
                $(".leftFooter>i").eq(0).show();
                $(".leftFooter>i").eq(1).hide();
            }else{
                $(".leftFooter>i").eq(0).hide();
                $(".leftFooter>i").eq(1).show();
            }
            $.ajax({
                type: "POST",
                url: "${ctxPath}/consumerCollection/isCollection",
                dataType: 'json',
                data:{
                    artificerId :"${returnResult.data.id}",
                    customerId :userInfo?userInfo.id:28,
                    status:status==0?0:1
                }
            });
        });
        
        $("#buyBtn").click(function () {
            location.href="${ctxPath}/artificerMeans/toDetailedInfoPage/${returnResult.data.id}?businessId="+$("#busssizInfo").find("input:checked").attr("data-business-id");
        })

        //请求项目
        $.ajax({
            type: "POST",
            url: "${ctxPath}/artificerBusiness/getAllBusiness/${returnResult.data.id}",
            dataType: 'json',
            contentType: "application/json",
            success:function(data){
                if(data.status=="0000"){
                    var  result=data.data;
                    var str="  <li class=\"aui-list-item wechat-top\" style=\"background-color: #f0f0f0;\">\n" +
                        "            <div class=\"aui-media-list-item-inner\">\n" +
                        "                <div class=\"aui-list-item-label-icon\">\n" +
                        "                    服务项目\n" +
                        "                </div>\n" +
                        "                <div class=\"aui-list-item-label-icon\"  id=\"comment\" onclick='toCommentPage()'>\n" +
                        "                    <span style=\"font-size: 12px;\" id='commentCount'>${commentCount}</span><span style=\"font-size: 12px\">人评论</span>\n" +
                        "                    <span class=\"aui-iconfont aui-icon-right\"></span>\n" +
                        "                </div>\n" +
                        "            </div>\n" +
                        "        </li>";
                    if(result.length>0){
                        for(var i=0;i<result.length;i++){
                            var  business=result[i];
                            str+="<li class=\"aui-list-item aui-list-item-middle\" onclick='chooseBusiness(this)'>\n" +
                                "            <div class=\"aui-media-list-item-inner\">\n" +
                                "                <div class=\"aui-list-item-media wechat-avatar\">\n" +
                                "                    <img src=\"http://www.tyler.org.cn/images/small/b.jpg\" style=\"width: 80px;height: 70px;\">\n" +
                                "                </div>\n" +
                                "                <div class=\"aui-list-item-inner\">\n" +
                                "                    <div class=\"aui-list-item-text\">\n" +
                                "                        <div class=\"aui-list-item-title\">"+business.businessName+"</div>\n" +
                                "                        <div class=\"aui-list-item-right\">\n";
                            if(i==0)
                                str+= "                            <label><input class=\"aui-radio\" type=\"radio\" name=\"pay\" value=\"\" data-business-id='"+business.id+"' checked></label>\n" ;
                            else
                                str+= "                            <label><input class=\"aui-radio\" type=\"radio\" name=\"pay\" value=\"\" data-business-id='"+business.id+"' ></label>\n" ;
                            str+=  "                        </div>\n" +
                                "                    </div>\n" +
                                "                    <div class=\"aui-list-item-text aui-font-size-12\">\n" +
                                "                        ¥"+business.price+"/"+business.serviceDuration+"分钟\n" +
                                "                    </div>\n" +
                                "                    <div class=\"aui-list-item-text aui-font-size-12\">\n" +
                                "                        接单时间:24小时接单\n" +
                                "                    </div>\n" +
                                "                    <div class=\"aui-list-item-text aui-font-size-12\">\n" +
                                "                        总订单:"+i+"单\n" +
                                "                    </div>\n" +
                                "                </div>\n" +
                                "            </div>\n" +
                                "        </li>";
                        }
                        str+="  <li class=\"aui-list-item aui-list-item-middle\" >\n" +
                            "            <div class=\"aui-media-list-item-inner\">\n" +
                            "            </div>\n" +
                            "        </li>";
                        $("#busssizInfo").html(str);
                    }else{
                        str+="<li class='aui-list-item aui-list-item-middle'><div style='line-height:1.4rem;text-align: center;font-style: normal;font-size: 14px;width: 100%;height: 1.5rem;color: gray;margin-top: 15px;'>暂无相关服务项目!</div></li>";
                        $("#busssizInfo").html(str);
                    }
                }
            }
        });
    })
</script>
</html>